<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>歌曲推荐</title>
		<script src="../../../js/vue.js"></script>
		<script src="../../../js/element.js"></script>
		<script src="../../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../../css/element.css" />
		<link rel="stylesheet" type="text/css" href="../../../css/menus/find/find.css" />
		<!-- 阿里图标库 -->
		<link rel="stylesheet" type="text/css" href="../../../fonts/iconfont/iconfont.css" />
	</head>
	<body>
		<div id="app">
			<div class="header">
				<div class="banner">
					<el-carousel :interval="4000" type="card" height="300px">
						<el-carousel-item v-for="item in bannerList" :key="item.albumId">
							<!-- 轮播图图片 -->
							<div class="bannerImgDiv" @click="openMask(item)">
								<img class="bannerImg" :src="item.albumImg">
							</div>
						</el-carousel-item>
						<!-- 轮播图遮罩鼠标悬浮显现 -->
						<div class="bannerImgDivMask" @click="closeMask(bannerInfo.albumId)">
							<i class="iconfont icon-24gf-playCircle" @click="bannerPlay(item.albumId)"></i>
						</div>
					</el-carousel>
				</div>
			</div>
			
			<div class="main">
				<div class="title">猜你喜欢</div>
				<hr>
				<div class="sheetList">
					<div class="sheet" v-for="(sheet,index) in sheetList">
						<div class="sheetImg" >
							<img :src="sheet.img"
								alt="" >
							<div class="mask" @mouseover="mouseOver(index)" 
								@mouseleave="mouseLeave(index)" @click="mouseClick(sheet.id)"
								@contextmenu.prevent="rightClick(sheet.id)">
								<i class="iconfont icon-24gf-playCircle"></i>
							</div>
						</div>
						<div class="sheetName" @click="mouseClick(sheet.id)">{{sheet.name}}</div>
					</div>
					<!-- <div v-if="index > 5"></div> -->
				</div>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
					// bannerList: [{
					// 		imgUrl: '../../../images/banner/banner1.jpg',
					// 		songId: 1,
					// 		albumId: '1000'
					// 	},
					// 	{
					// 		imgUrl: '../../../images/banner/banner2.jpg',
					// 		songId: 2,
					// 		albumId: '1000'
					// 	},
					// 	{
					// 		imgUrl: '../../../images/banner/banner3.jpg',
					// 		songId: 3,
					// 		albumId: '1000'
					// 	},
					// 	{
					// 		imgUrl: '../../../images/banner/banner4.jpg',
					// 		songId: 4,
					// 		albumId: '1000'
					// 	},
					// 	{
					// 		imgUrl: '../../../images/banner/banner5.jpg',
					// 		songId: 5,
					// 		albumId: '1000'
					// 	},
					// ],
					// 用户点击的遮罩信息
					bannerInfo: '',
					bannerList:'',
					sheetList:'',
				}
			},
			mounted() { // 生命周期函数
				this.getBanner(),
				this.getMaybeLove()
			},
			methods: {
				openMask(item) {
					console.log(item)
					// 1、打开遮罩
					const bannerMaskDocument = document.querySelector('.bannerImgDivMask')
					bannerMaskDocument.style.visibility = 'visible'
					this.bannerInfo = item
				},
				// 当用户点击遮罩
				closeMask(id) {
					console.log(id)
					// 1、关闭遮罩
					const bannerMaskDocument = document.querySelector('.bannerImgDivMask')
					if (bannerMaskDocument.style.visibility == 'visible') {
						bannerMaskDocument.style.visibility = 'hidden'
					}
					// 2、打开歌单
					// 2-1、获取父页面的 iframe 标签 的 src
					// 设置 src，并将专辑的 id，作为参数链接拼接的后面，传到父页面
					const fatherHtml =  window.parent.document.querySelector("#indexIframe")
					fatherHtml.setAttribute('src', 'album/album.html?id='+this.bannerInfo.albumId)
					// 清空数据
					this.bannerInfo = ''
				},
				bannerPlay() {
					console.log(this.bannerInfo)
				},
				// 获取周播放量前 5 的专辑信息，作为轮播信息
				getBanner(){
					axios({
						method: 'get',
						url: 'http://localhost:8160/top/getBanner',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.bannerList = res.data.data.albumList
							// 赋值
							// this.userInfo = res.data.data.userInfo
						} else {
							this.$message.error(res.data.message)
						}
					})
				},
				// 通过值获取cookie
				getCookie(key) {
					// 如果浏览器中有多个cookie，会以 ；分隔 例如：a=a1;b=b1
					// 根据 ；将 cookie 字符串分割成数组 
					var cookieArr = document.cookie.split("; ");
					// 遍历数组
					for (var i = 0; i < cookieArr.length; i++) {
						// 再根据 = 分隔数组中的每一个元素，数组第一个就是key，第二个就是value
						var cookiePair = cookieArr[i].split("=");
						if (key == cookiePair[0]) {
							return decodeURIComponent(cookiePair[1]);
						}
					}
					return null;
				},
				getMaybeLove(){
					axios({
						method: 'get',
						url: 'http://localhost:8160/user/maybeLove',
						headers: {
							'token': this.getCookie('yxy-pre:user_token')
						}
					}).then(res => {
						//处理返回的数据，如果登录成功，保留登录成功的状态，转向成功页面。如果登录不成功，提示用户
						if (res.data != undefined && res.data.code == 200) {
							console.log(res.data)
							this.sheetList = res.data.data.loveSheetList
						} else {
							this.$message.error(res.data.message)
						}
					})
				},
				changeChildrenHtml(){
					
				},
				// 鼠标移入，图片上移
				mouseOver(index){
					console.log('鼠标移入')
					const imgDocument = document.querySelectorAll('.sheetImg img')
					imgDocument[index].style.transform = 'translateY(-10px)'
				},
				// 鼠标移出，图片下移
				mouseLeave(index){
					console.log('鼠标移出')
					const imgDocument = document.querySelectorAll('.sheetImg img')
					imgDocument[index].style.transform = 'translateY(0px)'
				},
				// 鼠标点击
				mouseClick(id){
					const topHtml =  window.top.document.querySelector("#indexIframe")
					topHtml.setAttribute('src', 'sheet/sheet.html?id='+id)
				},
			}
		})
	</script>
</html>
